<template>
    <fieldset>
        <legend>setup钩子</legend>
        <h1>{{num}}</h1>
        <h2>{{num2}}</h2>
        <h3>{{aa}}</h3>
        <h4>{{msg}}</h4>
    </fieldset>
</template>
<script>
import { toRefs,getCurrentInstance } from 'vue';

export default{
    props:['num'],
    // setup钩子是vue3新增的钩子，在beforeCreate和created之前执行
    //使用setup函数时，它将接收两个参数：
    //  1.props
    //  2.context
    //Props
        // setup函数中的第一个参数是 props。
        // setup函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。
    // setup钩子不会因为Props的变化而重新调用
    // setup钩子的返回值是可以直接给模板使用的
    setup(props,context){
        //    console.log(props);
        //    console.log(props.num);//10
        //    console.log(context);

        // 输出插槽节点
        console.log(context.slots);
       
        //在setup中可以获取组件实例,但是不要在setup中操作data
        // setup中获取data：getCurrentInstance
        let proxy = getCurrentInstance().ctx
        console.log(proxy);
        console.log(proxy.msg);//undefined

        //  因为 props 是响应式的，所以使用es6语法结构Props会失去props响应式
        // 如果需要解构 prop，可使用toRefs来保持响应式
        let {num} =toRefs(props)
        return{
            num2:num,
            aa:999
        }
    },
    data(){
        return{
            msg:"ikun"
        }
    }
}
</script>